<template>
  <div class="menu-manager-container">
    <el-splitter>
      <el-splitter-panel size="30%">
        <div class="tree-panel">
          <div class="tree-header">
            <edit-tree-header></edit-tree-header>
          </div>
          <div class="tree-content">
            <edit-tree></edit-tree>
          </div>
        </div>
      </el-splitter-panel>
      <el-splitter-panel :min="200">
        <div class="content-panel"></div>
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<script setup lang="ts">
import editTree from './editTree.vue';
import editTreeHeader from './editTreeHeader.vue';
</script>

<style scoped>
.menu-manager-container {
  height: 100%;
  width: 100%;
  display: flex;
}
.tree-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.content-panel {
  height: 100%;
}
.tree-header {
  display: flex;
  height: 100px;
  width: 80%;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid blueviolet;
}
.tree-content {
  flex: 1;
  width: 95%;
  display: flex;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
}
</style>
